<template>
    <section>
        <el-form ref="formRef" :model="formData" :inline="true" class="common-search-form">
            <el-form-item prop="startDate">
                <el-date-picker
                    v-model="daterangeVal"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                    @change="onChangeDate"
                >
                    <template #prefix>
                        <span class="label">统计日期</span>
                    </template>
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="premisesName">
                <el-input
                    v-model="formData.premisesName"
                    class="select"
                    clearable
                    placeholder="请输入"
                    @change="getData"
                >
                    <template #prefix>
                        <span class="label">楼盘名称</span>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="deviceCode">
                <el-input v-model="formData.deviceCode" class="select" clearable placeholder="请输入" @change="getData">
                    <template #prefix>
                        <span class="label">点位编码</span>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="coMdl">
                <el-select
                    v-model="formData.coMdl"
                    collapse-tags
                    placeholder="请选择合作模式"
                    class="select"
                    clearable
                    @change="getData"
                >
                    <template #prefix>
                        <div class="label">合作模式</div>
                    </template>
                    <el-option v-for="(item, index) in list" :key="index" :label="item" :value="item" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetFields"> 重置 </el-button>
                <el-button :loading="exportLoading" plain @click="onExport"> 导出</el-button>
            </el-form-item>
        </el-form>
    </section>
    <section>
        <section class="tip">按天统计点位成本，报表每天凌晨01:00更新</section>
        <XcTable id="xc-table" :loading="tableLoading" :data="tableList" :columns="tableColumns">
            <el-table-column width="220">
                <template #header>
                    <el-tooltip
                        class="item"
                        content="甲方分成单价=【最低刊播单价*（1-税率）*甲方分成比例 】"
                        placement="top"
                        effect="light"
                    >
                        <span>甲方分成单价（元）<i class="el-icon-question"></i></span>
                    </el-tooltip>
                </template>
                <template #default="scope">
                    <span class="scopeName">{{ scope.row.divUnitPrice }}</span>
                </template>
            </el-table-column>
            <el-table-column width="220">
                <template #header>
                    <span>税率（%）</span>
                </template>
                <template #default="scope">
                    <span class="scopeName">{{ scope.row.taxRate }}</span>
                </template>
            </el-table-column>
            <el-table-column width="220">
                <template #header>
                    <el-tooltip class="item" placement="top" effect="light">
                        <template #content
                        >分成模式：分成金额=上刊广告条数*甲方分成单价<br />
                            租赁模式：分成金额=楼盘下所有可售、维护状态点位数之和*（单价/年/台➗365）
                        </template>
                        <span>成本（元）<i class="el-icon-question"></i></span>
                    </el-tooltip>
                </template>
                <template #default="scope">
                    <span class="scopeName">{{ scope.row.cost }}</span>
                </template>
            </el-table-column>
        </XcTable>
    </section>
    <Pagination
        :page-no="formData.pageNum"
        :page-size="formData.pageSize"
        :total="formData.total"
        @changePage="changePage"
        @changePageSize="changePageSize"
    ></Pagination>
</template>

<script setup lang="ts">
import { computed, reactive, ref, onMounted } from 'vue';
import XcTable from '@x-tech/fe-pc-components/src/components/XcTableTemplate/XcTable.vue';
import type { FormRules, FormInstance } from 'element-plus';
import Pagination from '@/components/common/Pagination.vue';
import { getcostPage, exportCost } from '@/api/dataReport';
import { exportFormBlob } from '@/utils/common';
import { useStore } from 'vuex';

const store = useStore();
const userInfo = computed(() => store.state.userGroup.userInfo);
const formRef: any = ref<FormInstance>();
const formData = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0,
    deviceCode: '',
    premisesName: '',
    startDate: '',
    endDate: '',
    coMdl: '',
});
const daterangeVal = ref([]);
const exportLoading = ref(false);
const list = ['租赁', '分成'];
const tableLoading = ref(false);
const tableList = ref([]);
import { ElMessage } from 'element-plus';

const tableColumns = [
    { label: '统计日期', key: 'statisDate', prop: { minWidth: '220', fixed: 'left' } },
    { label: '楼盘名称', key: 'premisesName', prop: { minWidth: '220', fixed: 'left' } },
    { label: '合作模式', key: 'coMdl', prop: { minWidth: '150' } },
    { label: '单价/年/台（元）', key: 'unitPrice', prop: { minWidth: '200' } },
    { label: '楼盘编码', key: 'premisesId', prop: { minWidth: '165' } },
    { label: '点位编码', key: 'deviceCode', prop: { minWidth: '200' } },
    { label: '上刊广告条数', key: 'adNum', prop: { minWidth: '150' } },
    { label: '最低刊播单价（元/台/天/条）', key: 'minUnitPrice', prop: { minWidth: '255' } },
    { label: '甲方分成比例（%)', key: 'divRate', prop: { minWidth: '200' } },
    // { label: '甲方分成单价（元）', key: 'divUnitPrice', prop: { minWidth: '200' } },
    // { label: '税率（%）', key: 'taxRate', prop: { minWidth: '150' } },
    // { label: '成本（元）', key: 'cost', prop: { minWidth: '150' } },
];

const getData = async () => {
    tableLoading.value = true;
    try {
        let res = await getcostPage(formData);
        console.log(res);
        tableList.value = res.data;
        formData.total = res.totalSize;
    } finally {
        tableLoading.value = false;
    }
};
onMounted(async () => {
    getData();
});
const onChangeDate = (date: any) => {
    console.log(date);
    if (date && date.length === 2) {
        [formData.startDate, formData.endDate] = date;
        getData();
    } else {
        [formData.startDate, formData.endDate] = ['', ''];
        getData();
    }
};
const changePage = (val) => {
    formData.pageNum = val;
    getData();
};
const changePageSize = (val) => {
    formData.pageSize = val;
    getData();
};
const onExport = async () => {
    try {
        exportLoading.value = true;
        const { file, fileName } = await exportCost(formData);
        exportFormBlob(file, fileName);
    } finally {
        exportLoading.value = false;
    }
};
// 重置表单
const resetFields = () => {
    if (!formRef.value) {
        return;
    }
    formRef.value.resetFields();
    formData.startDate = '';
    formData.endDate = '';
    daterangeVal.value = [];
    getData();
};
</script>

<style lang="scss" scoped>
.tip {
    width: 100%;
    height: 40px;
    background: rgba(241, 90, 74, 0.1);
    border-radius: 4px;
    font-size: 14px;
    color: #666666;
    line-height: 40px;
    padding: 0 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}
::v-deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    display: flex;
    align-items: center;
    width: 280px;
}

::v-deep(.el-date-editor) {
    .el-input__prefix .el-input__icon {
        display: none;
    }

    .el-input__prefix-inner {
        &::before {
            content: '';
            padding-right: 15px;
            font-size: 14px;
            color: #808080;
        }
    }
    .el-input__inner {
        padding-left: 96px;
    }
}
.scopeName {
    padding-left: 25px;
}
</style>
